<template>
  <div>
    <div class="my-3">
      <input placeholder="请输入新密码"
             v-model="password"
             type="password"
             class="input mb-3" />
    </div>

    <vm-button text="确认修改"
               @buttonClicked="submit"></vm-button>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'

export default {
  components: { VmButton },
  props: {},
  data() {
    return {
      password: '',
      phoneNumber: '',
      verifyCode: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    async getParams() {
      const res = await this.$router.getParams()
      this.phoneNumber = res && res.phoneNumber || ''
      this.verifyCode = res && res.verifyCode || ''
    },

    submit() {
      if (!this.password) {
        return this.$notice.toast({ message: '请输入新密码' })
      }
      if (this.password.length < 3) {
        return this.$notice.toast({ message: '密码长度不能少于3位' })
      }

      this.$http({
        method: 'PUT',
        name: 'auth.user.password.reset',
        data: {
          newPassword: this.password,
          phoneNumber: this.phoneNumber,
          verifyCode: this.verifyCode
        },
        errorMsg: '重置密码失败，请重试！'
      }).then(res => {
        this.$tools.resignKeyboard()
        this.$notice.toast({ message: '重置密码成功，请使用新密码进行登录' })
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.mt-3 {
  margin-top: 30px;
}
.mb-3 {
  margin-bottom: 30px;
}
.my-3 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.input {
  height: 100px;
  padding-left: 30px;
  padding-right: 30px;
  flex: 1;
  background-color: #fff;
  border-top-width: 1px;
  border-top-color: #ddd;
  border-bottom-width: 1px;
  border-bottom-color: #ddd;
  tint-color: #999;
}
</style>
